<template>
    <view class="content">
        <view v-for="(item, index) in res" :key="index" class="store-item">
            <view class="store-box">
                <img :src="item.storeImg" alt="" class="img"/>
                <view>
                    <view class="title">{{ item.storeName }}</view>
                    <view class="desc wes">{{ item.storeDesc }}</view>
                </view>
                <view class="btn">进店</view>
            </view>
            <scroll-view
                enableBackToTop="true"
                lower-threshold="250"
                @scrolltolower="loadmore()"
                scroll-with-animation
                scroll-x
                class="scoll-page"
            >
                <view class="goods-box">
                    <view v-for="(eve, i) in item.goodsList" :key="i" class="goods-item">
                        <img :src="eve.goodsImg" alt="" class="img">
                        <view class="price">￥{{ eve.goodsPrice }}</view>
                    </view>
            </view>
                
            </scroll-view>
            
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			// 遍历的数据
			res: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		watch: {
		},
		methods: {
            loadmore() {}
			
		}
	}
</script>

<style lang='scss' scoped>
.content{
    .store-item{
        background: green;
        width: 100%;
        height: 346rpx;
        background: #FFF;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
        padding: 20rpx 0 0 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .store-box{
        width: 100%;
        height: 90rpx;
        display: flex;
        align-items: center;
        .img{
            width: 90rpx;
            height: 90rpx;
            margin-right: 20rpx;
        }
        .title{
            font-weight: 500;
            font-size: 28rpx;
            color: #212121;
        }
        .desc{
            color: #757575;
            font-weight: 400;
            font-size: 24rpx;
            margin-top: 12rpx;
            width: 440rpx;
            margin-right: 24rpx;
        }
        .btn{
            width: 96rpx;
            height: 52rpx;
            background: #E6FFF7;
            border-radius: 12rpx;
            text-align: center;
            line-height: 52rpx;
            font-size: 24rpx;
            color: #009968;
            margin-right: 20rpx;
        }
        
    }
    .scoll-page{
        margin-top: 16rpx;
        padding-left: 110rpx;
        box-sizing: border-box;
    }
    .goods-box{
        display: flex;
    }
    .goods-item{
        width: 160rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 12rpx;
        .img{
            width: 160rpx;
            height: 160rpx;
        }
        .price{
            font-size: 26rpx;
            color: #FA2C19;
            font-weight: bold;
        }
    }
}
</style>
